<template>
	<view :class="currentTheme" class="ranking">
		<a-nabbar name="势力榜" />
		<view class="rankBr"></view>
		<me-tabs v-model="indexCurrent" @tabTop="getTabTop" :height="98" :tabs="tabs" @change="tabGetChange"
			activeColor="#765CFE"></me-tabs>
		<view class="sticky-tabs ">
			<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle" :duration="300" :current="tabIndex"
				@change="getChange">
				<swiper-item v-for="(a,b) in tabs" :key="b">
					<!--剧本势力榜-->
					<scriptRank v-if="a.value == 1" />
					<!--发行势力榜-->
					<issue-rank v-if="a.value == 2" />
					<!--店家势力榜-->
					<store-rank v-if="a.value == 3" />
					<!--DM势力榜-->
					<issue-rank v-if="a.value == 4" type="dm" />
				</swiper-item>
			</swiper>

			<view class="myIssue u-flex u-row-between"
				v-if="userType == 'issue'&&indexCurrent===1 || clerkRole=='DM'&&indexCurrent===3">
				<view class="u-flex">
					<view class="u-flex u-margin-right-16" v-if="currentObj.presentLocation">
						<image-number :number="currentObj.presentLocation"></image-number>
					</view>
					<item-image type="1" :img="currentObj.avatar" :size="80"></item-image>
					<view class="name">
						<view class="content-desc-item u-font-28">我</view>
						<view class="bang" v-if="!currentObj.presentLocation">未上榜</view>
						<!--            <view class="bang">与昨日比较下降7名<u-icon  name="jiantou-copy" size="20" custom-prefix="custom-icon" color="#4BFF7A"></u-icon></view>-->
					</view>
				</view>
				<view class="u-flex">
					<trend :trend="currentObj.trend || 0 "></trend>
					<text class="text-color-txtTheme u-font-28 u-margin-left-10">
						{{currentObj.total || 0}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperList from '@/mixins/swiperList.js'
	import pageMixins from '@/pages/pageMixins.js'
	import ScriptRank from "@/pagesA/acomponents/ranking/scriptRank.vue";
	import upCallback from '@/mixins/upCallbackMixin.js'
	import IssueRank from "@/pagesA/acomponents/ranking/issueRank";
	import StoreRank from "@/pagesA/acomponents/ranking/storeRank";
	import imageNumber from '@/components/imageNumber/imageNumber.vue'
	import {
		getDetail
	} from '@/api/crud.js'
	import trend from '@/pagesA/acomponents/ranking/trend.vue'
	export default {
		name: "index",
		components: {
			StoreRank,
			IssueRank,
			ScriptRank,
			trend,
			imageNumber
		},
		mixins: [upCallback, swiperList, pageMixins],
		data() {
			return {
				tabs: [{
						value: '1',
						name: '剧本',
						list: null,
						subName: '势力榜'
					},
					{
						value: '2',
						name: '发行',
						list: null,
						subName: '势力榜'
					},
					{
						value: '3',
						name: '店家',
						list: null,
						subName: '势力榜'
					},
					{
						value: '4',
						name: 'DM',
						list: null,
						subName: '势力榜'
					},
				],
				currentObj: {}, //我的数据

			}
		},
		computed: {
			userType() {
				return this.loginForm.userType
			},
			clerkRole() {
				return this.loginForm.clerkRole
			},
			otherHeight:{
				get(){
					const isFlag = this.userType == 'issue'&&this.indexCurrent===1 || this.clerkRole=='DM'&&this.indexCurrent===3;
					return isFlag ? '190rpx' : '10rpx'
				},
				set(){
					
				}
			}
		},
		onLoad(option) {
			const tabIndex = 0;
			this.option = option;
			this.tabGetChange(tabIndex)
			this.indexCurrent = tabIndex;
			//获取当前用户发行榜单
			const meObj = {
				avatar: this.loginForm.avatar,
				nickname: this.loginForm.nickname,
			}
			if (this.userType === 'issue') {
				getDetail('', 'powerListIssue', 'shopApi', 'getPowerListIssueByUid').then(res => {
					this.currentObj = {
						...res,
						...meObj
					}
				})
			}
			//获取当前用户DM榜单
			if (this.clerkRole === 'DM') {
				getDetail({
					uid: this.loginForm.uid
				}, 'powerListDm', 'shopApi', 'getPowerListDmByUid').then(res => {
					this.currentObj = {
						...res,
						...meObj
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.rankBr {
		height: 1px;
		background: #FFFFFF;
		opacity: 0.2;
	}

	.myIssue {
		background: #F3EFFE;
		height: 160rpx;
		left: 0;
		right: 0;
		padding: 0 82rpx 0 54rpx;
		position: fixed;
		bottom: 0;

		.num {
			color: #8F94A5;
			font-size: 36rpx;
			font-weight: bold;
			font-style: italic;
			margin-right: 33rpx;
		}

		.name {
			margin-left: 17rpx;

			.bang {
				width: 86rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				background: rgba(90, 70, 190, 0.2);
				border-radius: 6rpx;
				color: #9087FE;
				font-size: 22rpx;
				margin-top: 19rpx;
			}
		}

		.number {
			position: absolute;
			right: 80rpx;
		}
	}
</style>
